<template>
  <div
    class="pageBanner"
    :style="{ 'background': 'url(' + pageData.serverInvestment.bannerUrl + ')'}"
    style="background-size: 100% 100%;"
  >
    <div class="pageContainer text">
      <h1>{{pageData.serverInvestment.title}}</h1>
      <div class="line"></div>
      <div class="name">{{pageData.serverInvestment.titleDesc}}</div>
    </div>
  </div>


  <div class="pageContainer">
    <div class="boxTitle boxMargin">
      <div class="title ">
        <h1 style="">{{pageData.serverInvestment.severBackTitle}}</h1>
        <h2>{{pageData.serverInvestment.severName}}</h2>
      </div>
    </div>

    <div class="descText">{{pageData.serverInvestment.serverDesc}}</div>

    <div class="service">
      <div class="item" v-for="item in pageData.serviceListList">
        <img :src="item.backUrl"/>
        <div class="title">{{item.title}}</div>
        <div class="text">{{item.content}}</div>
      </div>
    </div>


    <div class="boxTitle boxMargin">
      <div class="title ">
        <h1 style="">{{pageData.serverInvestment.investBackTitle}}</h1>
        <h2>{{pageData.serverInvestment.investTitle}}</h2>
      </div>
    </div>

    <div class="attImg">
      <img :src="pageData.serverInvestment.investUrl"/>
    </div>

    <div class="joinText">
      <div class="title1">{{pageData.serverInvestment.investBelowTitle}}</div>
      <div class="title2">{{pageData.serverInvestment.connectTitle}}</div>

      <div class="contact">
        <div class="text"><img src="@/assets/images/attract/icon1.png"/>{{pageData.serverInvestment.emailAddr}}</div>
        <div class="text"><img src="@/assets/images/attract/icon2.png"/>{{pageData.serverInvestment.connectPhone}}</div>
      </div>
    </div>

  </div>


</template>

<script setup>
  import {ref, onMounted} from 'vue'
  import {apiGetServiceInvestment} from '@/api/index.js'

  const pageData = ref({
    serverInvestment: {},
    serviceListList: []
  })
  onMounted(() => {
    apiGetServiceInvestment({}).then((res) => {
      pageData.value = res
    })
  })

</script>

<style scoped lang="scss">

  @media screen and (max-width: 1079px) {
    .descText {
      font-size: 14px;
    }
    .joinText {
      text-align: center;
      .title1 {
        font-size: 16px;
        padding-top: 12px;
      }
      .title2 {
        font-size: 14px;
        padding-top: 5px;
        font-weight: bold;
      }

      .contact {
        font-size: 14px;
        padding-top: 10px;
        color: #69696F;
        padding-bottom: 20px;
        .text {
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 16px;
            height: 16px;
            display: block;
            margin-right: 5px;
          }
        }
      }
    }

    .boxMargin {
      margin-top: 15px;
    }

    .attImg {
      img {
        width: 100%;
        display: block;
      }
    }

    .service {
      .item {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #e8e8e8;
        flex: 1;
        img {
          width: 100%;
          display: block;
        }
        .title {
          font-size: 16px;
          padding: 10px 0 5px 0;
        }
        .text {
          font-size: 14px;
        }
      }
    }

  }

  @media screen and (min-width: 1080px) {

    .descText {
      font-size: 0.9vw;
    }
    .joinText {
      .title1 {
        font-size: 1.6vw;
        padding-top: 1.2vw;
      }
      .title2 {
        font-size: 1vw;
        padding-top: 1vw;
        font-weight: bold;
      }

      .contact {
        font-size: 0.9vw;
        padding-top: 1.4vw;
        line-height: 1.8vw;
        color: #69696F;
        padding-bottom: 6vw;
        vertical-align: center;
        .text {
          display: flex;
          align-items: center;
          img {
            width: 1.2vw;
            height: 1.2vw;
            display: block;
            margin-right: 0.5vw;
          }
        }

      }
    }

    .boxMargin {
      margin-top: 4vw;
    }

    .attImg {
      width: 53vw;
      img {
        width: 100%;
        display: block;
      }
    }

    .service {
      display: flex;
      gap: 1vw;
      margin-top: 2vw;
      .item {
        padding: 1vw;
        border: 1px solid #e8e8e8;
        flex: 1;
        img {
          width: 100%;
          display: block;
        }
        .title {
          font-size: 1.2vw;
          padding: 1vw 0 0.5vw 0;
        }
        .text {
          font-size: 0.9vw;
        }
      }
    }

  }
</style>
